<template>
  <div class="mod-config">
    <el-form :model="dataForm" @keyup.enter.native="getDataList()" style="width:50%;margin: auto">
      <el-form-item>
        <!--        <el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>-->
        <div>
          <span>页面信息</span>>
        </div>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="请输入内容" v-model="dataForm.hometitle">
          <template slot="prepend">首页标题</template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="请输入内容" v-model="dataForm.newstitle">
          <template slot="prepend">新闻标题</template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="请输入内容" v-model="dataForm.centertitle">
          <template slot="prepend">个人中心</template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="请输入内容" v-model="dataForm.examinationtitle">
          <template slot="prepend">考试标题</template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="请输入内容" v-model="dataForm.traintitle">
          <template slot="prepend">培训标题</template>
        </el-input>
      </el-form-item>
      <el-form-item label="客服联系方式：">
        <el-input v-model="dataForm.mobile" placeholder="联系电话" clearable></el-input>
      </el-form-item>
      <el-form-item label="证件到期提醒天数：">
        <el-input type="number" v-model="dataForm.alertdays" placeholder="请输入天数" clearable></el-input>
      </el-form-item>
      <el-form-item label="Logo:" prop="portrait" v-model="remark">
        <el-upload
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          :before-upload="beforeImgUpload"
          :action="uploadImgUrl"
          list-type="picture-card"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <span>小提示：建议上传大小为100*100(px)像素图</span>
      </el-form-item>
      <span>
        <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
      </span>
    </el-form>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>

<script>
import AddOrUpdate from './contact-add-or-update'
import Vue from 'vue'
export default {
  data() {
    return {
      dataForm: {
        mobile: '',
        hometitle: '',
        newstitle: '',
        centertitle: '',
        logoUrl: [],
        examinationtitle: '',
        traintitle: '',
        paramKey: 'tenantsysconfiginof',
        alertdays: ''
      },
      remark: '',
      uploadImgUrl:
        this.$http.adornUrl('/sys/oss/upload?token=') + Vue.cookie.get('token'),
      paramValue: '',
      fileList: [],
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false
    }
  },
  components: {
    AddOrUpdate
  },
  activated() {
    this.getDataList()
  },
  methods: {
    handleSuccess(response, file, fileList) {
      this.remark = response.data.id
    },
    handleRemove(file) {
      this.remark = ''
    },
    beforeImgUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG && !isPNG) {
        this.$message.error('上传图片为 image/jpeg/image/png 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return (isJPG || isPNG) && isLt2M
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      this.$http({
        url: `/tenantsysconfig/listNoPage`,
        method: 'post'
      }).then(data => {
        if (data && data.code === 200) {
          this.dataForm = JSON.parse(data.data.paramValue)
          this.dataForm.logoUrl = data.data.logoUrl
          this.remark = data.data.remark
        }
      })
    },
    dataFormSubmit() {
      this.paramValue = JSON.stringify(this.dataForm)
      this.$http({
        url: `/tenantsysconfig/save`,
        method: 'post',
        data: {
          paramKey: this.dataForm.paramKey,
          paramValue: this.paramValue,
          remark: this.remark
        }
      }).then(data => {
        console.log(this.paramValue)
        if (data && data.code === 200) {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500
          })
          this.getDataList()
        }
      })
    },
    // 删除
    deleteHandle(id) {
      var ids = id
        ? [id]
        : this.dataListSelections.map(item => {
            return item.id
          })
      this.$confirm(
        `确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          this.$http({
            url: '/config/delete',
            method: 'post',
            data: { ids: ids }
          }).then(data => {
            if (data && data.code === 200) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500
              })
              this.getDataList()
            } else {
              this.$message.error(data.msg)
            }
          })
        })
        .catch(() => {})
    }
  }
}
</script>
